<template>
	<view>
		<u-gap></u-gap>
		<view class="content">
			<u-input v-model="typeText"  type="text" :disabled="true" border></u-input>
			<!-- <u-action-sheet safe-area-inset-bottom :list="actionSheetList" v-model="type" @click="actionSheetCallback"></u-action-sheet> -->
			<u-gap></u-gap>
			
			<view class="card" @click="show = true">
				<view class="">
					<view class="no" v-if="cardIndex == null">请选择银行卡</view>
					<view class="yes" v-else>
						<view class="">
							<view class="">
								<view class="">{{cardList[cardIndex].bankName}}</view>
								<view class="">{{cardList[cardIndex].realName}}</view>
							</view>
							<view class="">{{cardList[cardIndex].cardText}}</view>
						</view>
					</view>
				</view>
				<view class="">
					<u-icon name="arrow-right" color="#AAAAAA"></u-icon>
				</view>
			</view>
			<view class="number">
				<view class="title">提现金额</view>
				<view class="input">
					<view class="icon">￥</view>
					<u-input :clearable="false" v-model="cashFee" type="number" placeholder=" " :custom-style="customStyle"></u-input>
					<view class="all" @click="cashFee = currentEnableFee">全部提现</view>
				</view>
				<view class="tip">
					<view class="">可提现金额<text>{{currentEnableFee}}</text></view>
					<navigator hover-class="none" url="/pages/user/withdrawalRecord/withdrawalRecord" class="">提现记录<u-icon name="arrow-right"></u-icon>
					</navigator>
				</view>
			</view>
		</view>
		<view class="btn">
			<navigator url="/pages/user/addCard/addCard" class="item add">
				<u-icon name="plus" size="38" color="#AAAAAA"></u-icon>
				<text>添加新卡</text>
			</navigator>
			<view class="item next" @click="next">
				<text>下一步</text>
			</view>
			<view class="safe-area-inset-bottom"></view>
		</view>

		<u-popup mode="center" :mask-close-able="false" closeable border-radius="20" v-model="showId">
			<view class="popup">
				<view class="title">提现至银行卡需要验证您的身份</view>
				<view class="popup-tip">验证码{{time < 60 ? '已' : '将'}}发送至{{phone}}</view>
				<view class="code">
					<u-input :clearable="false" v-model="smsCode" placeholder="请输入验证码"></u-input>
					<u-button @click="getCode" size="mini" :custom-style="customSstyle" ripple>{{time == 60 ? '获取验证码' : time +'s后重新获取'}}</u-button>
				</view>
				<view class="determine" @click="withdrawal">
					提现
				</view>
			</view>
		</u-popup>

		<u-popup @open="open" safe-area-inset-bottom v-model="show" mode="bottom" border-radius="40" closeable>
			<view class="popup-card">
				<view class="title">请选择银行卡</view>
				<scroll-view scroll-y style="height: 700rpx;">
					<view class="list">
						<view class="item" v-for="(item,index) in cardList" :key="index" @click="choiceBand(index)">
							<view class="">{{item.bankName}}（{{item.bankId}}）</view>
							<u-checkbox v-model="item.check" shape="circle" active-color="#FF4E46"></u-checkbox>
						</view>

						<view @click="cardList == '' ? $u.route('/pages/user/addCard/addCard') : $u.route('/pages/user/bankCard/bankCard');show = false"
						 class="item">
							<view class="">使用新卡提现</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeText: '',
				show: false,
				showId: false,
				cardIndex: null,
				smsCode: '',
				type: false,
				time: 60,
				cardList: [],
				cashFee: '',
				currentEnableFee: 0,
				customSstyle: {
					backgroundColor: "#F39A52",
					color: "#ffffff",
					border: 'none'
				},
				phone: '',
				customStyle: {
					'font-weight': 'bold',
					'font-size': '48rpx'
				},
				actionSheetList: [{
						text: '我的余额',
						cashType: 1
					},
					{
						text: '商城钱包',
						cashType: 2
					},
					{
						text: '代理收入',
						cashType: 3
					},
					{
						text: '商家服务券',
						cashType: 4
					},
					{
						text: '店铺货款',
						cashType: 5
					},
					{
						text: '服务商钱包',
						cashType: 11
					},
					{
						text: '米惠金',
						cashType: 12
					},
					{
						text: '公司合伙人',
						cashType: 13
					},
					{
						text: '优惠补贴',
						cashType: 14
					},
					{
						text: '城市合伙人',
						cashType: 15
					},
					{
						text: '个人账户红积分提现',
						cashType: 16
					},
					{
						text: '服务中心红积分提现',
						cashType: 17
					}
					
				],
				typeList:[{name:"银行卡",value:"1"},{name:"支付宝",value:"2"},{name:"微信",value:"3"}],
				cashType:null
			};
		},
		onLoad(options) {
			console.log(options)
			this.currentEnableFee = options.currentEnableFee//可提现余额
			this.cashType=Number(options.cashType);//提现类型
			this.typeText=options.typeText;//提现名称
			// if (options.typeIndex) {
			// 	this.typeIndex =Number(options.typeIndex);
			// 	this.typeText = this.actionSheetList[this.typeIndex].text;
			// 	this.cashType=this.actionSheetList[this.typeIndex].cashType;
			// }
			let reg = /^(\d{3})\d{4}(\d{4})$/,
				userInfo = uni.getStorageSync('userInfo')
			userInfo.userName = userInfo.userName.replace(reg, '$1****$2')
			this.phone = userInfo.userName
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		methods: {
			actionSheetCallback(index) {
				this.typeText = this.actionSheetList[index].text;
				this.typeIndex = index;
				this.cashType=this.actionSheetList[index].cashType;
				
			},
			
			updateData() {

			},
			async getCode() {
				if (this.time != 60) return
				await this.$u.get('sms/send/identity/' + uni.getStorageSync('userInfo').userName)
				uni.showToast({
					title: '验证码已发送'
				})
				this.timer = setInterval(() => {
					this.time--
					if (this.time <= 0) {
						this.time = 60
						clearInterval(this.timer)
					}
				}, 1000)
			},
			withdrawal() {
				
				if (this.smsCode == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				
				this.$u.post('orderformcash/apply', {
					bankId: this.cardList[this.cardIndex].id,
					cashFee: this.cashFee,
					cashType: this.cashType,
					smsCode: this.smsCode
				}).then(res => {
					uni.showToast({
						title: '提现成功'
					})
					clearInterval(this.timer)
					this.showId = false
					this.time = 60
					uni.navigateBack();
				})
			},
			async next() {
				console.log(this.cashType)
				
				if (this.cardIndex == null) {
					uni.showToast({
						title: '请选择银行卡',
						icon: 'none'
					})
					this.show = true
					return
				}
				if (this.cashFee == '') {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none'
					})
					return
				}
				if (this.cashFee == '0' || this.cashFee > this.currentEnableFee) {
					uni.showToast({
						title: '提现金额不足',
						icon: 'none'
					})
					return
				}
				this.showId = true
				if (this.time != 60) return
				await this.$u.get('sms/send/identity/' + uni.getStorageSync('userInfo').userName)
				uni.showToast({
					title: '验证码已发送'
				})
				this.timer = setInterval(() => {
					this.time--
					if (this.time <= 0) {
						this.time = 60
						clearInterval(this.timer)
					}
				}, 1000)
			},
			choiceBand(index) {
				this.cardList.forEach(item => {
					item.check = false
				})
				this.$set(this.cardList[index], 'check', true)
				this.cardIndex = index
				this.show = false
				console.log(this.cardList[this.cardIndex].id)
			},
			open() {
				this.$u.get('userbankcard/list').then(res => {
					if (res == '') return
					let reg = /^(\d{4})\d+(\d{4})$/
					res.forEach((item, index) => {
						item.cardText = item.bankId.replace(reg, "$1****$2");
						item.bankId = item.bankId.substr(item.bankId.length - 4)
						item.check = this.cardIndex == index ? true : false
					})
					this.cardList = res
				})
			}
		}
	}
</script>

<style lang="scss">
	.popup {
		padding: 30rpx 50rpx;

		.determine {
			line-height: 80rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 100rpx;
			background: linear-gradient(90deg, #FF3868, #FC6161);
			border-radius: 10rpx;
		}

		.code {
			padding-top: 50rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E1E0E0;
		}

		.title {
			padding-top: 40rpx;
			text-align: center;
			font-size: 32rpx;
		}

		.popup-tip {
			font-size: 28rpx;
			margin: 30rpx 0;
			text-align: center;
			color: #AAAAAA;
		}
	}

	.popup-card {
		.list {
			.item {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0;
				border-bottom: 1rpx solid #E9E9E9;
				margin: 0 30rpx;

				&:last-child {
					border-bottom: none;
				}
			}
		}

		.title {
			padding: 40rpx 0;

			text-align: center;
			margin: 0 30rpx;
			border-bottom: 1rpx solid #E9E9E9;
		}
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 30rpx;
		padding-bottom: 30rpx;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 100rpx;
			margin-top: 30rpx;

			text {
				font-size: 30rpx;
			}

			&:first-child {
				margin-top: 0;
			}

			&.next {
				color: #FFFFFF;
				background: linear-gradient(90deg, #FF3868, #FC6161);
				box-shadow: 1rpx 10rpx 15rpx 2rpx rgba(255, 78, 70, 0.3);
				border-radius: 20rpx;
			}

			&.add {
				border: 1rpx solid #AAAAAA;
				border-radius: 20rpx;

				text {
					color: #AAAAAA;
					margin-left: 20rpx;
				}
			}
		}
	}

	page {
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #f7f7f7;
	}

	.content {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;

		.number {
			.tip {
				font-size: 24rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				>view {
					text {
						color: #FF4E47;
					}
				}
			}

			.title {
				color: #AAAAAA;
				margin: 50rpx 0;
				margin-bottom: 30rpx;
				font-size: 24rpx;
			}

			.all {
				color: #F39D21;
				font-size: 24rpx;
				white-space: nowrap;
			}

			.input {
				display: flex;
				align-items: center;
				padding-bottom: 10rpx;

				.icon {
					font-size: 48rpx;
					font-weight: bold;
					// margin-right: 20rpx;
				}

				border-bottom: 1rpx solid #aaaaaa;
			}
		}

		.card {
			display: flex;
			align-items: center;

			>view {
				&:first-child {
					flex: 1;
					border-radius: 20rpx;
					border: 1rpx dashed #AAAAAA;
					height: 150rpx;

					.no,
					.yes {
						display: flex;
						justify-content: center;
						align-items: center;
						height: 100%;
					}

					.no {
						color: #AAAAAA;
						font-size: 30rpx;
					}

					.yes {
						>view {
							flex: 1;
							padding: 0 30rpx;

							>view {
								&:first-child {
									width: 100%;
									display: flex;
									justify-content: space-between;
								}

								&:last-child {
									font-size: 36rpx;
									margin-top: 10rpx;
									font-weight: bold;
								}
							}
						}
					}
				}

				&:last-child {
					margin-left: 30rpx;
				}
			}
		}
	}
</style>
